<template>
	<Row>
		<i-col span="16">
			<Row v-for="i in customIconList.length / 3" :key="`custom-icon-row-${i}`">
				<i-col span="8" v-for="item in customIconList.slice((i - 1) * 3, i * 3)" :key="`custom-icon-${item}`">
					<Card style="margin: 0 5px 5px; text-align: center;">
						<icons :size="30" :type="item" />
						<p class="icon-code">&lt;Icons :size="30" type="{{ item }}"&gt;</p>
						<p>&lt;CommonIcon :size="30" type="_{{ item }}"&gt;</p>
					</Card>
				</i-col>
			</Row>
			<Row>
				<i-col>
					<Card style="margin: 0 5px 5px; text-align: center;">
						<common-icon :size="30" type="ionic" />
						<p class="icon-code">iView内置图标</p>
						<p>&lt;CommonIcon :size="30" type="ionic"&gt;</p>
					</Card>
				</i-col>
			</Row>
		</i-col>
		<i-col span="8">
			<Card>
				<p class="intro-p">
					<Icon style="margin-right: 10px;" :size="10" type="heart" />Icons组件支持自定义图标的显示，具体自定义图标字体文件的制作请参考文档。
				</p>
				<p class="intro-p">
					<Icon
						style="margin-right: 10px;"
						:size="10"
						type="heart"
					/>CommonIcon组件同时支持iView内置图标类型和自定义图标类型，为了区别这两种类型，需要在自定义图标名称前加下划线"_"
				</p>
			</Card>
		</i-col>
	</Row>
</template>

<script>
import Icons from '_c/icons';
import CommonIcon from '_c/common-icon';
export default {
	name: 'icons_pages',
	components: {
		Icons,
		CommonIcon
	},
	data() {
		return {
			customIconList: ['woman', 'man', 'smile', 'meh', 'frown', 'bear']
		};
	}
};
</script>

<style lang="less">
.icon-code {
	margin: 20px 0 10px;
}
.intro-p {
	margin-bottom: 10px;
}
</style>
